<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .button:hover {
            background-color: #45a049;
        }
        .response {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
        }
        .error {
            background-color: #ffebee;
            border-color: #f44336;
        }
        .success {
            background-color: #e8f5e8;
            border-color: #4caf50;
        }
    </style>
</head>
<body>
    <h1>语言切换API测试</h1>
    
    <div>
        <button class="button" onclick="testChangeLanguage('zh')">切换到中文</button>
        <button class="button" onclick="testChangeLanguage('en')">Switch to English</button>
        <button class="button" onclick="testGetCurrentLanguage()">获取当前语言</button>
    </div>
    
    <div id="response" class="response">API响应将显示在这里...</div>

    <script>
        const API_BASE = 'http://localhost:8080';
        
        async function testChangeLanguage(lang) {
            const responseDiv = document.getElementById('response');
            responseDiv.textContent = `正在切换语言到: ${lang}...`;
            responseDiv.className = 'response';
            
            try {
                const response = await fetch(`${API_BASE}/common/language`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ language: lang })
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    responseDiv.textContent = `✅ 语言切换成功!\n\n响应数据:\n${JSON.stringify(data, null, 2)}`;
                    responseDiv.className = 'response success';
                } else {
                    responseDiv.textContent = `❌ 语言切换失败!\n\n状态码: ${response.status}\n响应数据:\n${JSON.stringify(data, null, 2)}`;
                    responseDiv.className = 'response error';
                }
            } catch (error) {
                responseDiv.textContent = `❌ API调用失败:\n${error.message}`;
                responseDiv.className = 'response error';
            }
        }
        
        async function testGetCurrentLanguage() {
            const responseDiv = document.getElementById('response');
            responseDiv.textContent = '正在获取当前语言...';
            responseDiv.className = 'response';
            
            try {
                const response = await fetch(`${API_BASE}/common/language`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    responseDiv.textContent = `✅ 获取当前语言成功!\n\n当前语言: ${data.data.language}\n\n完整响应:\n${JSON.stringify(data, null, 2)}`;
                    responseDiv.className = 'response success';
                } else {
                    responseDiv.textContent = `❌ 获取当前语言失败!\n\n状态码: ${response.status}\n响应数据:\n${JSON.stringify(data, null, 2)}`;
                    responseDiv.className = 'response error';
                }
            } catch (error) {
                responseDiv.textContent = `❌ API调用失败:\n${error.message}`;
                responseDiv.className = 'response error';
            }
        }
    </script>
</body>
</html> 